<template>
  <div class="DashboardPage">
    <div class="top">
      <el-row :gutter="20" class="publicStyle">
        <el-col :span="14"
          ><el-card style="height: 235px">
            <!--            <el-row type="flex">-->
            <!--              <div class="left-content">11</div>-->
            <!--              <div class="right-content">11</div>-->
            <!--            </el-row>-->
            <div slot="header" class="clearfix">
              <span>机构概述</span>
            </div>
            <el-row>
              <el-col :span="12"
                ><div
                  class="grid-content bg-purple"
                  style="border-right: 1px solid #ebeef5"
                >
                  <div style="margin-bottom: 12px; margin-top: 20px">
                    西三旗分拣中心
                  </div>
                  <div style="font-size: 14px; color: #818693">
                    地址：北京顺义区天澜综合保税区123号
                  </div>
                  <div style="font-size: 14px; color: #818693; margin-top: 5px">
                    负责人：赵五金 16712345678
                  </div>
                  <el-button
                    style="
                      margin-top: 20px;
                      background: #ffeeeb;
                      border: 1px solid #e15536;
                    "
                    ><span style="color: #e15536"
                      >查看营业分布情况</span
                    ></el-button
                  >
                </div></el-col
              >
              <el-col :span="12">
                <div
                  class="grid-content bg-purple-light"
                  style="margin-left: 30px; white-space: nowrap"
                >
                  <div class="right-top" style="height: 85px">
                    <el-col :span="12">
                      <div>
                        <p>分拣中心（个）</p>
                        <span
                          style="
                            font-size: 32px;
                            color: #e15536;
                            font-weight: bold;
                          "
                          >1</span
                        >
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div>
                        <p>营业部（个）</p>
                        <span
                          style="
                            font-size: 32px;
                            color: #e15536;
                            font-weight: bold;
                          "
                          >4</span
                        >
                      </div>
                    </el-col>
                  </div>
                  <div class="right-bottom">
                    <el-col :span="12">
                      <div>
                        <p>司机人数（个）</p>
                        <span
                          style="
                            font-size: 32px;
                            color: #e15536;
                            font-weight: bold;
                          "
                          >48</span
                        >
                      </div></el-col
                    >
                    <el-col :span="12">
                      <div>
                        <p>快递员个数（个）</p>
                        <span
                          style="
                            font-size: 32px;
                            color: #e15536;
                            font-weight: bold;
                          "
                          >64</span
                        >
                      </div>
                    </el-col>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card></el-col
        >
        <el-col :span="10">
          <el-card style="height: 235px">
            <div slot="header" class="clearfix">
              <span>今日数据</span>
              <span
                style="
                  float: right;
                  padding: 3px 0;
                  font-weight: unset;
                  font-size: 14px;
                  color: #818693;
                "
              >
                <i
                  class="el-icon-refresh"
                  style="color: #f56c6c; font-size: 16px; font-weight: bold"
                ></i>
                2023-02-28 14:55</span
              >
            </div>
            <div style="margin-left: 20px">
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <div style="font-size: 14px">订单金额(元)</div>
                  <div
                    class="number"
                    style="font-size: 32px; font-weight: bold; margin: 25px 0"
                  >
                    <span>2284</span>
                  </div>
                  <div style="color: #818693; font-size: 14px">
                    较昨日+342
                    <i
                      class="el-icon-top"
                      style="color: #f56c6c; font-size: 13px; font-weight: bold"
                    ></i>
                  </div></div
              ></el-col>
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <div style="font-size: 14px">订单数量(笔)</div>
                  <div
                    class="number"
                    style="font-size: 32px; font-weight: bold; margin: 25px 0"
                  >
                    193
                  </div>
                  <div style="color: #818693; font-size: 14px">
                    较昨日+27
                    <i
                      class="el-icon-top"
                      style="color: #f56c6c; font-size: 13px; font-weight: bold"
                    ></i>
                  </div></div
              ></el-col>
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <div style="font-size: 14px">运输任务(元)</div>
                  <div
                    class="number"
                    style="font-size: 32px; font-weight: bold; margin: 25px 0"
                  >
                    38
                  </div>
                  <div style="color: #818693; font-size: 14px">
                    较昨日+26
                    <i
                      class="el-icon-top"
                      style="color: #f56c6c; font-size: 13px; font-weight: bold"
                    ></i>
                  </div></div
              ></el-col>
            </div> </el-card
        ></el-col>
      </el-row>
      <el-row :gutter="20" class="publicStyle">
        <el-col :span="14"><el-card style="height: 235px">11</el-card></el-col>
        <el-col :span="10"> <el-card style="height: 235px">22</el-card></el-col>
      </el-row>
      <el-row class="publicStyle">
        <el-col :span="24"><el-card style="height: 190px">11</el-card></el-col>
      </el-row>
      <el-row :gutter="20" class="publicStyle">
        <el-col :span="12"><el-card style="height: 484px">11</el-card></el-col>
        <el-col :span="12"><el-card style="height: 484px">11</el-card></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12"><el-card style="height: 585px">11</el-card></el-col>
        <el-col :span="12"><el-card style="height: 585px">11</el-card></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "DashboardPage",
};
</script>

<style lang="scss" scoped>
.DashboardPage {
  white-space: nowrap;
}
.publicStyle {
  margin-bottom: 20px;
  ::v-deep .el-card__header {
    border-bottom: unset;
    font-weight: bold;
    padding: 18px 20px 0;
  }
}
.right-top {
  p {
    margin: 0 0 5px;
    font-size: 14px;
  }
}
.right-bottom {
  p {
    margin: 0 0 5px;
    font-size: 14px;
  }
}
.grid-content bg-purple {
  display: flex;
  //flex-direction: column;
  text-align: center;
}
</style>
